import {defineStore} from 'pinia';
import { ref ,watch} from 'vue';

function initState(){
  return{
  isCollapse:false,
   tags:[
    {
        path:'/home',
        name:'home',
        label:" 首页",
        icon:'home'

    }
],
  currentMenu:null,
  menuList:[],
  token:'',
  routerList:[],

  }
}
export const useAllDataStore = defineStore('allData', () => {
  //ref  state属性
  //computed getters
  //function actions

  const state=ref(initState())


//持久化更新,刷新路由
  watch(state,(newObj)=>{
    if(!newObj.token) return
    localStorage.setItem("store", JSON.stringify(newObj))

  },
  {deep:true}
)


  function selectMenu(val){
    if(val.name==='home'){
      state.value.currentMenu=null
    }else{
      state.value.currentMenu=val
     let index= state.value.tags.findIndex((item)=>item.name===val.name)
      index===-1?state.value.tags.push(val):''
    }
  }

  function updateTags(tag){
    //更新菜单
    //根据传入的 tag 对象，
    // 在 state.value.tags 数组中找到与之匹配的项并删除
    //tags存储菜单标签的数组
    //findIndex 方法返回第一个满足条件的元素的索引
    let index=state.value.tags.findIndex((item)=>item.name===tag.name)
    state.value.tags.splice(index,1)
  }


  function updateMenuList(val){
    state.value.menuList=val
  }

function addMenu(router,type){
    //如果type是refresh，说明是刷新路由
    //如果type是add，说明是添加路由
            if(type==="refresh"){
              if(JSON.parse(localStorage.getItem("store"))){
                state.value=JSON.parse(localStorage.getItem("store"))
                state.value.routerList=[]
            }else{
              return;
            }


            const menu=state.value.menuList
                        //这里**代表0或多个文件夹，*代表文件。就是把views下的文件全部导入
            const module =import.meta.glob('../views/**/*.vue')
              
            console.log('匹配到的组件路径：', Object.keys(module)); 
            //这个是菜单格式化后的路由数组
            const routeArr=[]
            //格式化菜单路由
            menu.forEach(item => {
                   //如果菜单有children
                if(item.children){
                    		//把children遍历格式化
                    item.children.forEach(val => {
                      const lowerUrl=val.url.toLowerCase()
                        let url=`../views/${lowerUrl}.vue`
                        console.log(`子组件${val.url}`)                      
                        				//这里通过url取出对应的组件
                        val.component=module[url]
                    })
               //需要注意的是我们只需要为item.children中的菜单添加路由，所以我们把它解构出来
                    routeArr.push(...item.children)
                }else{
                      const lowerUrl=item.url.toLowerCase()

                  let url=`../views/${lowerUrl}.vue`
                  item.component=module[url]
                  routeArr.push(item)
                        console.log(`拼接的组件路径${url}`)

                }
            })

            //解决多路由登录问题
            state.value.routerList=[]
            let routers=router.getRoutes()
            routers.forEach(item=>{
              if(item.name=='main'||item.name=='login'||item.name=='404'){
                return
              }else{
                router.removeRoute(item.name)
              }
            })


            //遍历routeArr
            routeArr.forEach(item=>{
                //addRoute方法会返回一个函数，执行这个函数会把这个路由删除
                //这里我们把每一次router.addRoute添加路由的返回值收集起来，放到state中的routeList
                //addRoute第一个参数要添加子路由的路由name，第二个是一个路由记录
              state.value.routerList.push(router.addRoute("main",item))  
            })
            
          }

        }
        function clean(router){
          state.value.routerList.forEach((item)=>{
          // console.log(item)
          if(item) item() //执行返回的函数，删除路由
         })
        state.value=initState()
        localStorage.removeItem("store") //清除本地存储
        }
  return {
    state,
    selectMenu,
    updateTags,
    updateMenuList,
    addMenu,
    clean,
  }
})  